<template>
  <div class='voucher-detail first-box pr'>
    <img :src="imgs.bac1" alt="">

    <div class="pa head">
      <p class="money color-gold"><span>￥</span><span>{{info.money}}</span></p>
      <p class="title">{{info.title}}</p>
    </div>

    <div class="pa body box-size">
      <p>卡券编号：{{info.cardnumber}}</p>
      <p>到期时间：{{info.endtime}}</p>
      <p>使用条件：{{info.condition}}元以上</p>
    </div>

    <div class="pa box-size foot">
      <p class="title">
        <span class="line"></span>
        <span class="dot"></span>
        <span class="title">分享中心</span>
        <span class="dot"></span>
        <span class="line"></span>
      </p>
      <p class="rule">
        <!-- <span>①、最多分享5位好友</span>
        <span>②、分享返利1元</span>
        <span>③、消费返利2元</span> -->
        {{info.instructions}}
      </p>
    </div>

    <Btn class="pa btn" :buttonData="buttonData"></Btn>

    <div class="pa last color-gold"><span @click="$router.push('/member/voucher/share')">查看已分享好友</span></div>

    <div class="pa model" v-if="showModel" @click="showModel=false">
      <img :src="imgs.pointer" class="img-pointer pa" alt="">
    </div>
  </div>
</template>
<script>
import Btn from '../../common/button.vue'
export default {
  components: {Btn},
  name: "",
  data() {
    return {
      showModel:false,
      imgs:{
        bac1:require('../../../assets/img/vip/voucher/bac3.png'),
        pointer:require("../../../assets/img/vip/voucher/point.png")
      },
      info:{
        money:"",
        title:"",
        cardnumber:"",
        endtime:"",
        condition:"",
        shareLevel:"",
        instructions:""
      },

      buttonData:[
        {
          label:"去分享",
          click:this.save
        }
      ]

    };
  },
  methods: {
    save(){
      var params={
        id:sessionStorage.getItem("detailId"),
        shareLevel:this.info.shareLevel,
      }
      _g.apiPost("couponApp/checkShare.do",params).then(res=>{
        if(res.status==1){
          _g.toMessage(res)
        }else{
          setTimeout(()=>{
            this.showModel=true
          },2)
          setTimeout(()=>{
            var link =sessionStorage.getItem("setUrl");
            var imgUrl="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=903913314,1917087931&fm=200&gp=0.jpg"
            //分享朋友圈
            wx.onMenuShareTimeline({
                title: '赶快领取卡券！',
                link: link,
                imgUrl,// 自定义图标
                trigger: function (res) {
                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
                    //alert('click shared');
                },
                success: function (res) {
                    //alert('shared success');
                    //some thing you should do
                },
                cancel: function (res) {
                    //alert('shared cancle');
                },
                fail: function (res) {
                    //alert(JSON.stringify(res));
                }
            });
            //分享给好友
            wx.onMenuShareAppMessage({
                title: '赶快领取卡券！', // 分享标题
                desc: '领取卡券减上再减。', // 分享描述
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl, // 自定义图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.error(function (res) {
                // alert(res.errMsg);
            });
          },100)
        }
      })
    },
    getDetail(){
      var params={
        id:sessionStorage.getItem("detailId")||_g.getRouterParams(this).id
      }
      
      _g.apiPost("couponApp/getUserCouponInfo.do",params).then(res=>{
        var obj={
          money:res.data.couponValue,
          title:res.data.couponName,
          cardnumber:res.data.codeNum,
          endtime:res.data.validTill,
          condition:res.data.consumptionFull,
          shareLevel:res.data.shareLevel,//分享等级
          instructions:res.data.instructions,//使用说明
        }
        this.$set(this,"info",obj)
      })
    },
  },
  mounted() {
    // console.log(this.$router,window.history)
    var that=this
    if(location.href.indexOf("?from=")>-1){
      this.$router.push("/member/voucher/shareInfo/"+_g.getRouterParams(this).id)
    }else{
      _g.orderList([_g.setShare,this.getDetail])
      
    }
  }
};
</script>
<style lang="scss" scoped>
.voucher-detail {
  background: linear-gradient(left bottom,#EE9700,#F5DC00);
   background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
  padding: 15px;
  box-sizing: border-box;
  text-indent: 0;
  overflow: auto!important;

  >img{
    width: 100%;
    height: 100%;
  }
  .head{
    top: 7%;
    text-align: center;
    width: calc(100% - 30px);
    
    z-index: 5;

    .money{
      font-size: 25px;

      span:nth-child(2){
        font-size: 50px;
      }
    }
    .title{
      font-size: 20px;
      color: #999;
    }
  }
  .body{
    font-size: 14px;
    color: #999;
    top: 35%;
    width: calc(100% - 60px);
    left: 30px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 5%;

    p{
      display: inline-block;
      width: 80%;
      margin-left: 10%;
      margin-bottom: 5px;
    }
    p:nth-child(3){
      margin-bottom: 0;
    }
  }
  .foot{
    top: 53%;
    color: #999;
    width: calc(100% - 30px);
    

    .title{
      text-align: center;
    }

    .dot{
      display: inline-block;
      width: 0;
      padding: 3px;
      border-radius: 50%;
      background-color:#FC9522; 
      transform: translateY(-2px)
    }
    .line{
      display: inline-block;
      width: 70px;
      height: 1px;
      background-color:#FC9522; 
      transform: translateY(-4px)
    }

    .rule{
      width: 70%;
      font-size: 12px;
      margin-left: 15%;
      margin-top: 10px;
      line-height: 20px;
      max-height: 60px;
      overflow-y: auto;

      span{
        display: block;
        margin-bottom: 5px;
      }
    }

    
  }

  .btn{
    width: calc(100% - 60px);
    left: 30px;
    top: 75%;
  }
  .last{
    top: 83%;
    width: calc(100% - 30px);
    text-align: center;

    span{
      text-decoration: underline;
      font-size: 16px;
    }
    span:active{
      opacity: .6;
    }
  }
}
.model{
  width: 100%;
  height: 100%;
  background-color: rgba(121, 115, 115, 0.59);
  top: 0;
  left: 0;
  z-index: 10;

  .img-pointer{
    width: 35px;
    height: 35px;
    right: 10px;
    animation: move 1s infinite alternate;
  }
  @keyframes move {
    from{
      top: 0;
    }
    to{
      top: 20px;
    }    
  }
}

</style>